<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
$(document).ready(function () {
    $("button").click(function () {
        $("#div1").fadeOut()
        $("#div2").fadeOut("slow")
        $("#div3").fadeOut(3000)
    })
})
    </script>
</head>
<body>
<p>演示jQuery淡出方法</p>
<button>点击这里使三个矩形淡出</button>
<div id="div1" style="background-color: red; width: 50px; height: 50px;"></div>
<div id="div2" style="background-color: yellow; width: 50px; height: 50px;"></div>
<div id="div3" style="background-color: green; width: 50px; height: 50px;"></div>
</body>
</html>